<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="A simple jQuery image cropping and uploading plugin.">
  <meta name="author" content="Uncle Wang">
  <title>JFinal-Cropper</title>
  <link rel="shortcut icon" href="favicon.png">
  <link rel="icon" href="favicon.png">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"> -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="assets/plugins/lightbox/css/lightbox.css">
  <link rel="stylesheet" href="assets/css/cropper.css">
  <link rel="stylesheet" href="assets/css/main.css">
</head>

<body>
  <!--[if lt IE 9]>
  <div class="alert alert-warning alert-dismissible fade show m-0 rounded-0" role="alert">
    You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <![endif]-->

  <!-- Header -->
  <header class="navbar navbar-light navbar-expand-md">
    <div class="container">
      <a class="navbar-brand" href="./">Cropper - Demo</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-end" id="navbar-collapse" role="navigation">
        <nav class="nav navbar-nav">
          <a target="_blank" class="nav-link" href="https://github.com/fengyuanchen/cropperjs" data-toggle="tooltip"
            title="GitHub 下载">Cropper.js</a>
          <a target="_blank" class="nav-link" href="http://www.jfinal.com" data-toggle="tooltip"
            title="基于 Java 语言的极速 WEB + ORM 框架">JFinal</a>
        </nav>
      </div>
    </div>
  </header>

  <!-- Jumbotron -->
  <div class="jumbotron bg-info text-white rounded-0">
    <div class="container">
      <div class="row">
        <div class="col-md">
          <h1>JFinal-Cropper <small class="h6">v1.0.0</small></h1>
          <p class="lead">
            基于 Cropper.js 和 JFinal 的图片裁剪上传Demo<br />
            适用于头像设置、文章封面、电商等多方面的场景应用
          </p>
        </div>
        <!-- <div class="col-md">
          <div class="carbonads">
            <script id="_carbonads_js" src="//cdn.carbonads.com/carbon.js?serve=CKYI55Q7&placement=fengyuanchengithubio" async></script>
          </div>
        </div> -->
      </div>
    </div>
  </div>

  <!-- Content -->
  <div class="container">
    <div class="alert alert-success alert-dismissible fade show" role="alert">
      支持 jpg、png、bmp、gif 等常见图片格式
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <form id="cropForm" action="upload" enctype="multipart/form-data" method="post">
      <div class="row">
        <div class="col-md-9">
          <!-- <h3>Demo:</h3> -->
          <div class="img-container">
            <img id="image" src="assets/img/picture.gif" alt="Picture">
          </div>
        </div>
        <div class="col-md-3">
          <!-- <h3>Preview:</h3> -->
          <div class="docs-preview clearfix">
            <div class="img-preview preview-lg"></div>
            <div class="img-preview preview-md"></div>
            <div class="img-preview preview-sm"></div>
            <div class="img-preview preview-xs"></div>
          </div>

          <!-- <h3>Data:</h3> -->
          <div class="docs-data">
            <div class="input-group input-group-sm">
              <span class="input-group-prepend">
                <label class="input-group-text" for="dataX">X</label>
              </span>
              <input type="text" class="form-control" id="dataX" name="dataX" placeholder="x">
              <span class="input-group-append">
                <span class="input-group-text">px</span>
              </span>
            </div>
            <div class="input-group input-group-sm">
              <span class="input-group-prepend">
                <label class="input-group-text" for="dataY">Y</label>
              </span>
              <input type="text" class="form-control" id="dataY" name="dataY" placeholder="y">
              <span class="input-group-append">
                <span class="input-group-text">px</span>
              </span>
            </div>
            <div class="input-group input-group-sm">
              <span class="input-group-prepend">
                <label class="input-group-text" for="dataWidth">Width</label>
              </span>
              <input type="text" class="form-control" id="dataWidth" name="dataWidth" placeholder="width">
              <span class="input-group-append">
                <span class="input-group-text">px</span>
              </span>
            </div>
            <div class="input-group input-group-sm">
              <span class="input-group-prepend">
                <label class="input-group-text" for="dataHeight">Height</label>
              </span>
              <input type="text" class="form-control" id="dataHeight" name="dataHeight" placeholder="height">
              <span class="input-group-append">
                <span class="input-group-text">px</span>
              </span>
            </div>
            <div class="input-group input-group-sm">
              <span class="input-group-prepend">
                <label class="input-group-text" for="dataRotate">Rotate</label>
              </span>
              <input type="text" class="form-control" id="dataRotate" name="dataRotate" placeholder="rotate">
              <span class="input-group-append">
                <span class="input-group-text">deg</span>
              </span>
            </div>
            <div class="input-group input-group-sm">
              <span class="input-group-prepend">
                <label class="input-group-text" for="dataScaleX">ScaleX</label>
              </span>
              <input type="text" class="form-control" id="dataScaleX" name="dataScaleX" placeholder="scaleX">
            </div>
            <div class="input-group input-group-sm">
              <span class="input-group-prepend">
                <label class="input-group-text" for="dataScaleY">ScaleY</label>
              </span>
              <input type="text" class="form-control" id="dataScaleY" name="dataScaleY" placeholder="scaleY">
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-9 docs-buttons">
          <!-- <h3>Toolbar:</h3> -->

          <div class="btn-group">
            <button type="button" class="btn btn-primary" data-method="zoom" data-option="0.1" title="Zoom In">
              <span class="docs-tooltip" data-toggle="tooltip" data-animation="false"
                title="$().cropper(&quot;zoom&quot;, 0.1)">
                <span class="fa fa-search-plus"></span>
              </span>
            </button>
            <button type="button" class="btn btn-primary" data-method="zoom" data-option="-0.1" title="Zoom Out">
              <span class="docs-tooltip" data-toggle="tooltip" data-animation="false"
                title="$().cropper(&quot;zoom&quot;, -0.1)">
                <span class="fa fa-search-minus"></span>
              </span>
            </button>
          </div>

          <div class="btn-group">
            <button type="button" class="btn btn-primary" data-method="move" data-option="-10" data-second-option="0"
              title="Move Left">
              <span class="docs-tooltip" data-toggle="tooltip" data-animation="false"
                title="$().cropper(&quot;move&quot;, -10, 0)">
                <span class="fa fa-arrow-left"></span>
              </span>
            </button>
            <button type="button" class="btn btn-primary" data-method="move" data-option="10" data-second-option="0"
              title="Move Right">
              <span class="docs-tooltip" data-toggle="tooltip" data-animation="false"
                title="$().cropper(&quot;move&quot;, 10, 0)">
                <span class="fa fa-arrow-right"></span>
              </span>
            </button>
            <button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="-10"
              title="Move Up">
              <span class="docs-tooltip" data-toggle="tooltip" data-animation="false"
                title="$().cropper(&quot;move&quot;, 0, -10)">
                <span class="fa fa-arrow-up"></span>
              </span>
            </button>
            <button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="10"
              title="Move Down">
              <span class="docs-tooltip" data-toggle="tooltip" data-animation="false"
                title="$().cropper(&quot;move&quot;, 0, 10)">
                <span class="fa fa-arrow-down"></span>
              </span>
            </button>
          </div>

          <div class="btn-group">
            <button type="button" class="btn btn-primary" data-method="rotate" data-option="-15" title="Rotate Left">
              <span class="docs-tooltip" data-toggle="tooltip" data-animation="false"
                title="$().cropper(&quot;rotate&quot;, -15)">
                <span class="fa fa-rotate-left"></span>
              </span>
            </button>
            <button type="button" class="btn btn-primary" data-method="rotate" data-option="15" title="Rotate Right">
              <span class="docs-tooltip" data-toggle="tooltip" data-animation="false"
                title="$().cropper(&quot;rotate&quot;, 15)">
                <span class="fa fa-rotate-right"></span>
              </span>
            </button>
          </div>

          <div class="btn-group">
            <button type="button" class="btn btn-primary" data-method="scaleX" data-option="-1" title="Flip Horizontal">
              <span class="docs-tooltip" data-toggle="tooltip" data-animation="false"
                title="$().cropper(&quot;scaleX&quot;, -1)">
                <span class="fa fa-arrows-h"></span>
              </span>
            </button>
            <button type="button" class="btn btn-primary" data-method="scaleY" data-option="-1" title="Flip Vertical">
              <span class="docs-tooltip" data-toggle="tooltip" data-animation="false"
                title="$().cropper(&quot;scaleY&quot;, -1)">
                <span class="fa fa-arrows-v"></span>
              </span>
            </button>
          </div>

          <div class="btn-group">
            <button type="button" class="btn btn-warning" data-method="reset" title="Reset">
              <span class="docs-tooltip" data-toggle="tooltip" data-animation="false"
                title="$().cropper(&quot;reset&quot;)">
                <span class="fa fa-refresh"></span> 重置
              </span>
            </button>
            <label class="btn btn-secondary btn-upload" for="inputImage" title="Upload image file">
              <input type="file" class="sr-only" id="inputImage" name="file" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff">
              <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="Import image with Blob URLs">
                <span class="fa fa-upload"></span> 上传
              </span>
            </label>
          </div>

          <button type="submit" class="btn btn-info" data-method="saveCrop" data-target="#putData" title="保存">
            <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="保存">
              <span class="fa fa-save"></span> 保存
            </span>
          </button>

          <button type="button" class="btn btn-secondary" data-method="getData" data-option="" data-target="#putData">
            <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="" data-original-title="$().cropper(&quot;getData&quot;)">
              Get Data
            </span>
          </button>

          <div class="btn-group btn-group-crop">
            <button type="button" class="btn btn-success" data-method="getCroppedCanvas"
              data-option="{ &quot;maxWidth&quot;: 4096, &quot;maxHeight&quot;: 4096 }">
              <span class="docs-tooltip" data-toggle="tooltip" data-animation="false"
                title="$().cropper(&quot;getCroppedCanvas&quot;, { maxWidth: 4096, maxHeight: 4096 })">
                Get Cropped Canvas
              </span>
            </button>
            <button type="button" class="btn btn-success" data-method="getCroppedCanvas"
              data-option="{ &quot;width&quot;: 160, &quot;height&quot;: 90 }">
              <span class="docs-tooltip" data-toggle="tooltip" data-animation="false"
                title="$().cropper(&quot;getCroppedCanvas&quot;, { width: 160, height: 90 })">
                160&times;90
              </span>
            </button>
            <button type="button" class="btn btn-success" data-method="getCroppedCanvas"
              data-option="{ &quot;width&quot;: 320, &quot;height&quot;: 180 }">
              <span class="docs-tooltip" data-toggle="tooltip" data-animation="false"
                title="$().cropper(&quot;getCroppedCanvas&quot;, { width: 320, height: 180 })">
                320&times;180
              </span>
            </button>
          </div>

          <!-- Show the cropped image in modal -->
          <div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true"
            aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="getCroppedCanvasTitle">Cropped</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body"></div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                  <a class="btn btn-primary" id="download" href="javascript:void(0);" download="cropped.jpg">Download</a>
                </div>
              </div>
            </div>
          </div><!-- /.modal -->

          <input  type="hidden" class="form-control" id="putData" name="putData" />
        </div><!-- /.docs-buttons -->

        <div class="col-md-3 docs-toggles">
          <!-- <h3>Toggles:</h3> -->
          <div class="btn-group d-flex flex-nowrap" data-toggle="buttons">
            <label class="btn btn-primary active">
              <input type="radio" class="sr-only" id="aspectRatio0" name="aspectRatio" value="1.7777777777777777">
              <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="aspectRatio: 16 / 9">
                16:9
              </span>
            </label>
            <label class="btn btn-primary">
              <input type="radio" class="sr-only" id="aspectRatio1" name="aspectRatio" value="1.3333333333333333">
              <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="aspectRatio: 4 / 3">
                4:3
              </span>
            </label>
            <label class="btn btn-primary">
              <input type="radio" class="sr-only" id="aspectRatio2" name="aspectRatio" value="1">
              <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="aspectRatio: 1 / 1">
                1:1
              </span>
            </label>
            <label class="btn btn-primary">
              <input type="radio" class="sr-only" id="aspectRatio3" name="aspectRatio" value="0.6666666666666666">
              <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="aspectRatio: 2 / 3">
                2:3
              </span>
            </label>
            <label class="btn btn-primary">
              <input type="radio" class="sr-only" id="aspectRatio4" name="aspectRatio" value="NaN">
              <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="aspectRatio: NaN">
                Free
              </span>
            </label>
          </div>

          <div class="btn-group d-flex flex-nowrap" data-toggle="buttons">
            <label class="btn btn-primary">
              <input type="radio" class="sr-only" id="viewMode0" name="viewMode" value="0">
              <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="View Mode 0">
                VM0
              </span>
            </label>
            <label class="btn btn-primary">
              <input type="radio" class="sr-only" id="viewMode1" name="viewMode" value="1">
              <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="View Mode 1">
                VM1
              </span>
            </label>
            <label class="btn btn-primary active">
              <input type="radio" class="sr-only" id="viewMode2" name="viewMode" value="2" checked>
              <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="View Mode 2">
                VM2
              </span>
            </label>
            <label class="btn btn-primary">
              <input type="radio" class="sr-only" id="viewMode3" name="viewMode" value="3">
              <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="View Mode 3">
                VM3
              </span>
            </label>
          </div>
        </div><!-- /.docs-toggles -->
      </div>
    </form>
  </div>
  <div class="container padding-t-15" data-lightbox="case-gallery-group">
    <p class="h5"><i class="fa fa-picture-o"></i> 大家裁过的图片 #(images.totalRow) 张</p>
    <hr>
    <!-- <p class="img-list-title"></p>     -->
    <div class="row">
      #for(image : images.list)
      <div class="col-md-3 col-sm-6">
        <div class="img-list">
          <div class="image">
            <a href="#(image.url)" data-lightbox="case-gallery-group">
              <figure style="background-image:url(#(image.url)"></figure>
            </a>
          </div>
          <div class="desc">
            <span class="desc-title">#date(image.createTime, "yyyy-MM-dd HH:mm:ss")</span>
            <span class="desc-text"><a href="#">删除</a>&nbsp;&nbsp;<a href="#">下载</a></span>
          </div>
        </div>
      </div>
      #else
      <div class="col-sm-6">
        <p>还没有人上传过照片，快去上传吧~~~</p>        
      </div>
      #end
    </div>
    <div class="row">
      <div class="col-sm-12">
        #@paginate(images.pageNumber, images.totalPage, "/")
      </div>
    </div>
  </div>

  <!-- Footer -->
  <div class="footer">
    <div class="container">
      <!-- <div class="footer-brand">
        <div class="footer-brand-logo"></div>
        J-Mult 快速开发框架
      </div>
      <p>
        © Copyright jmult.com 2019<br>京ICP备18031846号-1
      </p> -->
      <p class="social-list">
        友情链接：
        <a target="_blank" href="https://github.com/fengyuanchen/cropper">Cropper</a>
        <a target="_blank" href="#">JFinal 官网</a>
        <a target="_blank" href="#">开源中国</a>
        <a target="_blank" href="#">码云Gitee</a>
        <a target="_blank" href="#">站长统计</a>
        <a target="_blank" href="#">知乎</a>
        <!-- <a href="#"><i class="fa fa-github"></i></a> -->
      </p>
    </div>
  </div>

  <!-- Scripts -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
  <script src="assets/js/ajaxForm.js"></script>
  <script src="assets/plugins/lightbox/js/lightbox.js"></script>
  <script src="assets/js/cropper.js"></script>
  <script src="assets/js/main.js"></script>
</body>

</html>